<template>
  <div class="scanner-bodys" id="scanner-bodys">
    <van-nav-bar left-arrow title="扫码添加" @click-left="onClickLeft" />

    <div class="scroll-container scan-container">
      <div class="scan-none-1"></div>
      <div class="scan-box-container">
        <div class="scan-none-2"></div>
        <div class="scan-box">
          <div class="scan-box-area">
            <div class="top-left"></div>
            <div class="top-right"></div>
            <div class="bottom-left"></div>
            <div class="bottom-right"></div>
            <div class="light" @click="onLightTrigger">
              <i
                :class="[
                  'iconfont',
                  light ? 'icon-shanguangdeng-liang' : 'icon-shanguangdeng-an',
                ]"
              ></i>
              <span>轻触 {{ light ? "关闭" : "打开" }}</span>
            </div>
          </div>
        </div>
        <div class="scan-none-2"></div>
      </div>
      <div class="scan-none-1">放入框内，自动扫描</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Scan",
  data() {
    return {
      light: false,
    };
  },
  beforeCreate() {
    //将网页背景设置透明
    document.getElementById("app").style.backgroundColor = "transparent";
    document.getElementById("app").style.backgroundImage = "none";
    document.querySelector("body").style.backgroundColor = "transparent";
  },
  beforeDestroy() {
    var res = localStorage.getItem("Background");
    //恢复之前的背景
    try {
      res = JSON.parse(res);
      console.log(res["background-image"]);
      document.getElementById("app").style.backgroundImage =
        res["background-image"];
      document.querySelector("body").style.backgroundColor = "none";
    } catch (err) {
      document.getElementById("app").style.backgroundImage =
        "linear-gradient(-90deg, #29bdd9 0%, #276ace 100%)";
      document.querySelector("body").style.backgroundColor = "none";
      console.log(err.message);
    }

    try {
      QRScanner.hide((status) => {
        console.log("[Scan.vue] 关闭扫描" + JSON.stringify(status));
      });
      QRScanner.destroy(function (status) {
        console.log("[Scan.vue] 销毁扫码" + JSON.stringify(status));
      });
    } catch (e) {
      console.log("[Scan.vue]" + JSON.stringify(e));
    }
  },
  mounted() {
    this.onScan();
  },
  methods: {
    onClickLeft() {
      // this.$router.push({
      //           name: "Main",
      //           params: {
      //             value: "147260",
      //             routerType: "back",
      //           },
      //         });
      this.$router.go(-1);
    },
    /**
     * 扫码
     */
    onScan() {
      try {
        QRScanner.show((status) => {
          console.log("[Scan.vue onScan] 显示扫描" + JSON.stringify(status));
        });
        QRScanner.scan((err, contents) => {
          if (err) {
            alert(JSON.stringify(e));
          } else {
            try {
              var res = JSON.parse(contents.toString());
              this.$router.push({
                name: "Main",
                params: {
                  value: res.DeviceCode,
                  routerType: "back",
                },
              });
              navigator.vibrate(100);
            } catch (err) {
              alert("二维码错误");
              console.log(err.message);
            }
            //alert("扫描结果: " + contents);
          }
        });
      } catch (e) {
        console.log("[Scan.vue：onScan] " + JSON.stringify(e));
      }
    },

    /**
     * 手电筒开关
     */
    onLightTrigger() {
      try {
        if (!this.light) {
          QRScanner.enableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 打开手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 打开手电筒状态：" + JSON.stringify(status));
          });
        } else {
          QRScanner.disableLight((err, status) => {
            err &&
              console.log(
                "[Scan.vue] 关闭手电筒状态错误：" + JSON.stringify(err)
              );
            console.log("[Scan.vue] 关闭手电筒状态：" + JSON.stringify(status));
          });
        }
      } catch (e) {
        console.log("[Scan.vue] " + JSON.stringify(e));
        return;
      }
      this.light = !this.light;
    },
  },
};
</script>

<style lang="scss" scpoed>
.scanner-bodys {
  width: 100%;
  height: 100%;
  position: absolute;
  // min-height: 100vh;
  //可滚动内容区域
  .scroll-container {
    width: 100%;
    // padding-top:  2rem;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.scan-container {
  background: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;

  .scan-none-1 {
    flex: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding-top: 0.32rem;
    color: rgba(255, 255, 255, 0.8);

    &:first-child {
      flex: 0.6;
    }
  }

  .scan-box-container {
    display: flex;
    .scan-none-2 {
      flex: 1;
      background: rgba(0, 0, 0, 0.4);
    }

    .scan-box {
      width: 12rem;
      height: 12rem;
      border: 1px solid #888888;
      background: rgba(0, 0, 0, 0);

      .scan-box-area {
        width: 12rem;
        height: 12rem;
        position: relative;

        .light {
          width: 100%;
          position: absolute;
          color: rgba(255, 255, 255, 0.8);
          bottom: 0.32rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          i {
            font-size: 0.65rem;
            line-height: 0.8rem;
          }
        }

        .top-left {
          position: absolute;
          top: -3px;
          left: -3px;
          width: 1rem;
          height: 1rem;
          border-top: 0.1rem solid #00aaff;
          border-left: 0.1rem solid #00aaff;
        }

        .top-right {
          position: absolute;
          top: -3px;
          right: -3px;
          width: 1rem;
          height: 1rem;
          border-top: 0.1rem solid #00aaff;
          border-right: 0.1rem solid #00aaff;
        }

        .bottom-left {
          position: absolute;
          bottom: -3px;
          left: -3px;
          width: 1rem;
          height: 1rem;
          border-bottom: 0.1rem solid #00aaff;
          border-left: 0.1rem solid #00aaff;
        }

        .bottom-right {
          position: absolute;
          bottom: -3px;
          right: -3px;
          width: 1rem;
          height: 1rem;
          border-bottom: 0.1rem solid #00aaff;
          border-right: 0.1rem solid #00aaff;
        }
      }
    }
  }
}
.vux-header-back {
  color: white !important;
}
</style>